<!--  -->
<template>
  <div class="canvas">
    <vue-canvas-poster
      :widthPixels="1000"
      :painting="poster"
      @success="success"
      @fail="fail"
    ></vue-canvas-poster>
    <img style="width: 600px" :src="path" alt="" />
  </div>
</template>

<script>
import { VueCanvasPoster } from "vue-canvas-poster";
export default {
  props: {},
  components: { VueCanvasPoster },
  data() {
    return {
      resData: {},
      poster: {
        width: "550px",
        height: "876px",
        background: "#f4f5f7",
        views: [
          {
            type: "image",
            url: "https://img.zcool.cn/tubelocation/19be628215bb0002e03ab7319b40.png",
            id: "avatar",
            css: {
              top: "20px",
              left: "36px",
              borderRadius: "40px",
              width: "80px",
              height: "80px",
            },
          },
          {
            type: "text",
            id: "desc",
            text: `律允许范围内免责。
十一、通知
本平台向其用户发出的通知，将采用系统消息、弹窗、或页面公告等形式。本《用户协议》的条款修改或其他事项变更时，本平台可以以上述形式进行通知。

十二、其他
1.本协议之解释与适用，以及与本协议有关的争议，均应依照中华人民共和国法律予以处理，并以深圳南山法院为第一审管辖法院。
2.本协议的任何条款无论因何种原因无效或不具可执行性，其余条款仍有效，对双方具有约束力。
3.您可以通过联系客服与我们联系。`,
            css: {
              width: "550px",
            },
          },
          {
            type: "text",
            id: "title",
            text: "title",
            css: {
              top: ["20px", "desc"],
            },
          },
        ],
      },
      path: "",
    };
  },
  computed: {},
  created() {},
  mounted() {
    console.log(VueCanvasPoster, "VueCanvasPoster");
  },
  methods: {
    success(src) {
      this.path = src;
    },
    fail(err) {
      console.log("fail", err);
    },
  },
};
</script>
<style lang="scss" scoped>
.poster {
  width: 600px;
  height: 600px;
}
</style>
